<!--团队管理-->
<template>
  <view class="anchor-console-page">
		<c-layout>
      <c-navigation-bar :title="$t('user.teamManage')" @backEvent="goBack"/>
    <view class="box_content">
      <!--   切换tab      -->
      <view class="box_tab">
        <view class="box_checked_or_not"
              :class="chooseIndex === 0 ? 'active' : ''"
              @click="chooseCount(0)">{{ $t('user.personTeam') }}
        </view>
        <view class="box_checked_or_not"
              :class="chooseIndex === 1 ? 'active' : ''"
              @click="chooseCount(1)">{{ $t('user.storeTeam') }}
        </view>
      </view>

      <!--      个人信息-->
      <view class="box_user_info">

        <view class="box_head_name">
          <u-avatar size="130" :src="$u.file.getMedieUrl(headUrl)"/>
          <view class="box_name_id">
            <text class="text_name">{{ nickName }}</text>
            <text class="text_id">{{ idText }}</text>
          </view>
        </view>

        <view class="box_money_list" @click="click2MoneyList">
          <text class="text_money_list">{{ $t('user.zMoneyList') }}</text>
          <image style="height:16rpx;width:8rpx;" src="@/static/images/user/icon_grey_right.png"/>
        </view>

      </view>

      <!--佣金        -->
      <view class="box_total_day_week_money">
        <view class="box_up_down_text_total">
          <view class="box_start_end">
            <text class="text_big">{{ Number(total).toFixed(2) }}</text>
            <text class="text_small">{{ $t('user.totalYoungMoney') }}</text>
          </view>
        </view>
        <view class="box_up_down_text_day">
          <text class="text_big">{{ Number(day).toFixed(2) }}</text>
          <text class="text_small">{{ $t('user.todayMoney') }}</text>
        </view>
        <view class="box_up_down_text_week">
          <view class="box_start_end">
            <text class="text_big">{{ Number(week).toFixed(2) }}</text>
            <text class="text_small">{{ $t('user.weekMoney') }}</text>
          </view>
        </view>
      </view>

      <view style="width: 100%;height: 12rpx;background-color: #F5F6F8"/>

      <!--  代理协议    -->
      <view class="box_agent_tips" @click="click2Agent">
        <text class="text_agent">{{ $t('user.agentTips') }}</text>
        <view class="box_detail_tips">
          <text class="text_money_list">{{ $t('user.teamAgentTips') }}</text>
          <image style="height:16rpx;width:8rpx;margin-right: 20rpx" src="@/static/images/user/icon_grey_right.png"/>
        </view>
      </view>

      <!--   团队数量   -->
      <view class="box_left_right">
        <view class="text_black_left">{{ $t('user.teamNo') }}</view>
        <view class="text_gray_right">{{ teamNum }}</view>
      </view>

      <!--   有效邀请数量   -->
      <view class="box_left_right">
        <view class="text_black_left">{{ $t('user.workInviteNo') }}</view>
        <view class="text_gray_right">{{ workNum }}</view>
      </view>

      <view @click="click2Invite" class="box_invite">
        <text class="text_invite">{{ $t('user.invite_friend') }}
        </text>
        <u-button class="btn_invite" @click="click2Invite">
          {{ $t('user.now_invite') }}
        </u-button>
      </view>

      <!--   直属 二层 三层   -->
      <view class="box_left_right" @click="click2Member(1)">
        <view class="box_cons_left">
          <image style="width: 56rpx;height: 56rpx;margin-right: 24rpx;margin-left: 10rpx"
                 src="/static/images/user/icon_gold1.png"/>
          <view style="margin-left: 10rpx" class="text_black_left">{{ $t('user.rec') }}</view>
        </view>
        <view class="box_cons_right">
          <text style="color: #919191;font-size: 28rpx;margin-right: 12rpx">{{ $t('user.member') }}({{
              directNum
            }})
          </text>
          <image style="height:16rpx;width:8rpx;" src="@/static/images/user/icon_grey_right.png"/>
        </view>
      </view>
      <view class="box_left_right" @click="click2Member(2)">
        <view class="box_cons_left">
          <image style="width: 76rpx;height: 56rpx;margin-right: 24rpx" src="/static/images/user/icon_gold2.png"/>
          <view class="text_black_left">{{ $t('user.rec2') }}</view>
        </view>
        <view class="box_cons_right">
          <text style="color: #919191;font-size: 28rpx;margin-right: 12rpx">{{ $t('user.member') }}({{
              secondGrandNum
            }})
          </text>
          <image style="height:16rpx;width:8rpx;" src="@/static/images/user/icon_grey_right.png"/>
        </view>
      </view>
      <view class="box_left_right" @click="click2Member(3)">
        <view class="box_cons_left">
          <image style="width: 76rpx;height: 70rpx;margin-right: 24rpx" src="/static/images/user/icon_gold3.png"/>
          <view class="text_black_left">{{ $t('user.rec3') }}</view>
        </view>
        <view class="box_cons_right">
          <text style="color: #919191;font-size: 28rpx;margin-right: 12rpx">{{ $t('user.member') }}({{
              thirdGrandNum
            }})
          </text>
          <image style="height:16rpx;width:8rpx;" src="@/static/images/user/icon_grey_right.png"/>
        </view>
      </view>

    </view>
 </c-layout>
	</view>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      chooseIndex: 0,//0 个人团队 1店铺团队
      headUrl: '',//头像
      nickName: '',//昵称
      idText: '',
      total: 0,//总佣金
      day: 0,//今日佣金
      week: 0,//周佣金
      teamNum: 0,//团队数量
      workNum: 0,//有效邀请数量
      directNum: 0,//直推人数
      secondGrandNum: 0,//二代人数
      thirdGrandNum: 0,//三代人数
    };
  },
  onShow() {
    console.log("===z chooseIndex=" + this.chooseIndex)
    this.getData(this.chooseIndex)
  },
  mounted() {
    this.getData(0)
  },
  methods: {
    goBack() {
      uni.switchTab({
        url: "/pages/user/user"
      })
      // uni.navigateBack(1);
    },
    chooseCount(index) {
      this.chooseIndex = index;
      this.getData(index)
    },
    click2Member(id) {
      uni.navigateTo({
        url: `/pages/teamManage/teamMember?index=${this.chooseIndex}&id=${id}`
      })
    },
    click2Invite() {
      uni.navigateTo({
        url: `/pages/invitation/invitation`
      })
    },
    click2Agent() {
      uni.navigateTo({
        url: `/pages/teamManage/agentUrl`
      })
    },
    click2MoneyList() {
      uni.navigateTo({
        url: `/pages/teamManage/MoneyList?index=${this.chooseIndex}`
      })
    },
    getData(index) {
      let url;
      if (index == 0) {
        //个人团队
        url = '/app/userStatisticsTeam/getUserTeam'
      } else {
        //店铺团队
        url = '/app/shopStatisticsTeam/getShopTeam'
      }
      this.$u.get(url).then(res => {
        console.log("===z code=" + res.code)
        console.log('===z', res);
        this.headUrl = res.data.avatarUrl
        this.nickName = res.data.name
        this.idText = 'ID:' + res.data.randomId
        this.total = res.data.cumulative
        this.week = res.data.weekendCumulative
        this.day = res.data.dayCumulative
        this.teamNum = res.data.teamNum
        this.workNum = res.data.inviteNum
        this.directNum = res.data.directNum
        this.secondGrandNum = res.data.secondGrandNum
        this.thirdGrandNum = res.data.thirdGrandNum
      }).catch(err => {
        // 处理异常情况
        console.error("===z" + err);
        this.headUrl = '头像'
        this.nickName = ''
        this.idText = ''
        this.total = 0.00
        this.week = 0.00
        this.day = 0.00
        this.teamNum = 0
        this.workNum = 0
        this.directNum = 0
        this.secondGrandNum = 0
        this.thirdGrandNum = 0
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.anchor-console-page {
  .box_title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999; /* 设置一个比较高的z-index值，保证标题区域在最上层显示 */
  }

  .box_content {
    display: flex;
    flex-direction: column;

    .box_invite {
      width: 670rpx;
      height: 154rpx;
      border-radius: 20rpx;
      margin-bottom: 40rpx;
      margin-left: 40rpx;
      display: flex;
      background-image: url('/static/images/user/bg_invite_friend.png');
      flex-direction: column;
      background-size: cover;
      justify-content: center;

      .btn_invite {
        color: #fff;
        height: 50rpx;
        border-radius: 30rpx;
        background: linear-gradient(to right, #336AE6, #67AAFC);
        margin-left: 50rpx;
        margin-top: 10rpx
      }

      .text_invite {
        font-weight: bold;
        color: #2C60DE;
        margin-left: 50rpx;
        font-size: 32rpx;
        /* 设置两行省略 */
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 1; //行数
        line-clamp: 1;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
        lines: 1;
        /* 设置两行省略 */
      }

    }

    .box_cons_left {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .box_left_right {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40rpx;
      margin-left: 40rpx;
      margin-right: 40rpx;

      .text_black_left {
        color: #1E2432;
        font-size: 30rpx;
      }

      .text_gray_right {
        color: #919191;
        font-size: 32rpx;
      }

    }

    .box_agent_tips {
      width: 670rpx;
      height: 82rpx;
      margin-left: 40rpx;
      border-radius: 12rpx;
      background-color: #F5F6F8;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 40rpx;
      margin-bottom: 40rpx;

      .text_agent {
        color: #111118;
        font-size: 32rpx;
        margin-left: 28rpx;
      }

      .box_detail_tips {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .text_money_list {
          color: #919191;
          font-size: 24rpx;
          margin-right: 10rpx;
        }
      }

    }

    /*佣金*/
    .box_total_day_week_money {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 40rpx;

      .text_big {
        color: #111118;
        font-size: 60rpx;
        font-weight: bold;
      }

      .text_small {
        margin-top: 8rpx;
        color: #919191;
        font-size: 28rpx;
      }

      .box_start_end {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .box_up_down_text_total {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: start;
      }

      .box_up_down_text_day {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .box_up_down_text_week {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: end;
      }


    }

    /*个人信息*/
    .box_user_info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-left: 40rpx;
      margin-right: 36rpx;


      .box_money_list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .text_money_list {
          color: #919191;
          font-size: 24rpx;
          margin-right: 5rpx;
        }

      }

      .box_head_name {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .box_name_id {
          display: flex;
          flex-direction: column;
          margin-left: 30rpx;

          .text_name {
            color: #111118;
            font-size: 40rpx;
            /* 设置两行省略 */
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden; //溢出内容隐藏
            text-overflow: ellipsis; //文本溢出部分用省略号表示
            display: -webkit-box; //特别显示模式
            -webkit-line-clamp: 1; //行数
            line-clamp: 1;
            -webkit-box-orient: vertical; //盒子中内容竖直排列
            lines: 1;
            /* 设置两行省略 */
          }

          .text_id {
            color: #919191;
            font-size: 20rpx;
          }

        }

      }


    }

    /*切换tab*/
    .box_tab {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-left: 40rpx;
      margin-right: 40rpx;
      margin-top: 20rpx;
      margin-bottom: 38rpx;

      .box_checked_or_not {
        width: 320rpx;
        height: 64rpx;
        justify-content: center;
        align-items: center;
        background-color: #F5F6F8;
        border-radius: 20rpx;
        display: flex;
        flex-direction: row;
        color: #91909A;
        font-size: 24rpx;

        &.active {
          background-color: #2934D0;
          color: #FFFFFF;
        }

      }


    }


  }

  .top {
    padding: 56rpx;

    .title {
      display: flex;
      justify-content: space-between;

      uni-text {
        font-size: 72rpx;
        font-weight: 400;
        color: #02010E;
      }
    }

  }
}

</style>
